<template>
	<view class="my_big_box">
		<view class="big_box">
			<view>
				<view class="header">{{obj.taskTitle}}</view>
				<text class="my_header">{{taskTime.substring(0,5)}}</text>
			</view>

			<view class="message">
				<view>
					<u-parse :content="taskContent"></u-parse>
				</view>
			</view>
			<!-- 下图到时候可以使用v-if来使用 -->
			<view class="bottom-box">
				<view class="inbottom">
					<button openType="share" class="btn">
						<u-icon name="share" color="#dba34b" size="26"></u-icon>
						<view class="my_bottom">转发</view>
					</button>
				</view>
				<view class="inbottom">
					<button class="btn">
						<u-icon name="star-fill" color="#dba34b" size="26"></u-icon>
						<view class="my_bottom">收藏</view>
					</button>
				</view>
				<view class="inbottom">
					<button class="btn">
						<u-icon name="home" color="#dba34b" size="26"></u-icon>
						<view class="my_bottom">返回首页</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'taskDetails',
		meta: {
			title: "任务详情页面",
		},
		data() {
			return {
				value2: 0,
				taskContent: '',
				taskTime: '',
				obj: {},
			}
		},
		onLoad(options) {
			//接受参数，查询
			console.log("我TM进来了")
			let obj = JSON.parse(decodeURIComponent(options.obj))
			console.log("我是obj",obj)
			this.obj = obj
			this.taskContent = obj.taskContent
			//最好明确指明，因为熏染的时候可能还不知道你的obj的属性，会由substring的报错
			this.taskTime = obj.taskTime
		},
		methods: {
			click1(e) {
				console.log('click1', e);
			},
			// 只能使用button和menu分享
			onShareAppMessage() {
				var that = this;
				// 设置菜单中的转发按钮触发转发事件时的转发内容
				var shareObj = {
					// 默认是小程序的名称(可以写slogan等)
					path: '/pages/share/share', // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
					success: function(res) {
						// 转发成功之后的回调
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
					fail: function() {
						// 转发失败之后的回调
						if (res.errMsg == 'shareAppMessage:fail cancel') {
							// 用户取消转发
						} else if (res.errMsg == 'shareAppMessage:fail') {
							// 转发失败，其中 detail message 为详细失败信息
						}
					},
				};

				// 返回shareObj
				return shareObj;
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		//消除button的默认样式
		margin: 0;
		padding: 0;
		border: 0px; //自定义边框
		outline: none; //消除默认点击蓝色边框效果
		background-color: #ffffff;
	}

	.my_big_box {
		background-color: #ffffff;
	}

	.big_box {
		margin-left: 20rpx;
	}

	.header {
		font-weight: bold;
		font-size: 50rpx;
	}

	// text是行内元素,img不是
	.my_header {
		display: block;
		color: #777777;
		font-size: 30rpx;
		margin-top: 15rpx;
	}

	.message {
		margin-top: 30rpx;
		font-size: 30rpx;
	}

	.bottom-box {
		display: flex;
		flex-direction: row;
		width: 100vw;
		height: 100rpx;
	}

	.inbottom {
		display: flex;
		flex-direction: row;
		// 可以使用这个或者justify-content: center;
		align-items: center;
		margin-left: 70rpx;
	}

	.my_bottom {
		margin-left: 5rpx;
		font-size: 30rpx;
	}

	button {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	// 消除button的边界
	button::after {
		border: none;
	}
</style>
